<template>
  <div>
    <div class="app-table">
      <div class="app-body2">
        <div class="chart-top">
          <div class="title">月发放工资趋势图</div>
          <div class="sub-title">工资月份：</div>
          <div class="month">
            <el-date-picker v-model="value1" type="monthrange" start-placeholder="开始月份" end-placeholder="结束月份"
              value-format="YYYY-MM" range-separator="至" @change="monthChange" />
          </div>
        </div>
  
        <div id="main1" style="width: 100%; height: 400px"></div>
      </div>
     
      <div class="app-body2">
        <div class="chart-top">
          <div class="title">月工资人数统计图</div>
          <div class="sub-title">工资月份：</div>
          <div class="month">
            <el-date-picker v-model="value2" type="monthrange" start-placeholder="开始月份" end-placeholder="结束月份"
              value-format="YYYY-MM" range-separator="至" @change="monthChange3" />
          </div>
        </div>
  
        <div id="main3" style="width: 100%; height: 400px"></div>
      </div>
      <div class="app-body2">
        <div class="chart-top">
          <div class="title">月工资条目统计图</div>
          <div class="sub-title">工资月份：</div>
          <div class="month">
            <el-date-picker v-model="value2" type="monthrange" start-placeholder="开始月份" end-placeholder="结束月份"
              value-format="YYYY-MM" range-separator="至" @change="monthChange2" />
          </div>
        </div>
  
        <div id="main2" style="width: 100%; height: 400px"></div>
      </div>
    </div>
  </div>

</template>
<script>
import { getCurrentInstance } from "vue";

import { httpService } from "@/utils/httpService";

let myChart1;
let myChart2;
let myChart3;

export default {
  name: "NoFound",

  setup() {
    const { proxy } = getCurrentInstance()
    const echarts = proxy.$echarts
    console.log(echarts)
    return {
      echarts
    }
  },
  components: { getCurrentInstance, httpService },
  mounted() {

    let date = new Date();
    let day = ((date.getMonth()+ 1)>=10?(date.getMonth()+ 1):"0"+(date.getMonth()+ 1));
    this.value1[1] = date.getFullYear() + "-" + day;
    this.value1[0] = (date.getFullYear() - 1) + "-" + day;
    this.value2[1] = date.getFullYear() + "-" + day;
    this.value2[0] = (date.getFullYear() - 1) + "-" + day;

    this.value3[1] = date.getFullYear() + "-" + day;
    this.value3[0] = (date.getFullYear() - 1) + "-" + day;

    this.setChart1()
    this.setChart2()
    this.setChart3()


  },
  data() {
    return {
      value1: ['', ''],
      value2: ['', ''],
      value3: ['', ''],

    }
  },
  methods: {

    monthChange() {
      this.setChart1()
    },
    monthChange2() {
      this.setChart2()
    },
    monthChange3() {
      this.setChart3()
    },
    setChart1() {
      httpService("/javaApi/baseWage/queryCountByMonth", {
        "startWageMonth": this.value1[0],
        "endWageMonth": this.value1[1],
      }, "get").then(
        (data) => {
          if (data) {
            let names = [];
            let counts = [];
            for (let i = 0; i < data.length; i++) {
              names.push(data[i].name);
              counts.push(data[i].count);
            }

            let option1 = {
              tooltip: {
                trigger: 'axis'
              },

              xAxis: {
                type: 'category',
                data: names
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: counts,
                  type: 'line',
                  smooth: true
                }
              ]
            }
            if (myChart1 != null && myChart1 != "" && myChart1 != undefined) {
              myChart1.dispose();//销毁
            }
            myChart1 = this.echarts.default.init(document.getElementById('main1'));
            myChart1.setOption(option1)

          } else {
          }
        }
      );
    },
    setChart2() {
      httpService("/javaApi/baseWage/getTeacherWageByYearGroupWageType", {
        "startWageMonth": this.value2[0],
        "endWageMonth": this.value2[1],
      }, "get").then(
        (data) => {
          if (data) {
            let names = [];
            let counts = [];
            for (let i = 0; i < data.length; i++) {
              names.push(data[i].name);
              counts.push(data[i].count);
            }

            let option1 = {
              tooltip: {
                trigger: 'axis'
              },
              xAxis: {
                type: 'category',
                data: names
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: counts,
                  type: 'bar',
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                  }
                }
              ]
            }
            if (myChart2 != null && myChart2 != "" && myChart2 != undefined) {
              myChart2.dispose();//销毁
            }
            myChart2 = this.echarts.default.init(document.getElementById('main2'));
            myChart2.setOption(option1)

          } else {
          }
        }
      );
    },
    setChart3() {
      httpService("/javaApi/baseWage/queryTeacherNumberCountByMonth", {
        "startWageMonth": this.value2[0],
        "endWageMonth": this.value2[1],
      }, "get").then(
        (data) => {
          if (data) {
            let names = [];
            let counts = [];
            for (let i = 0; i < data.length; i++) {
              names.push({ value: data[i].count, name: data[i].name });
            }

            let option1 = {
              legend: {
                top: 'bottom'
              },
              tooltip: {
                trigger: 'item'
              },

              series: [
                {
                  name: '工资人数',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                  },
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: '40',
                      fontWeight: 'bold'
                    }
                  },

                  labelLine: {
                    normal: {
                      show: true
                    }
                  },
                  data: names
                }
              ]
            }
            if (myChart3 != null && myChart3 != "" && myChart3 != undefined) {
              myChart3.dispose();//销毁
            }
            myChart3 = this.echarts.default.init(document.getElementById('main3'));
            myChart3.setOption(option1)

          } else {
          }
        }
      );
    },
  }
}
</script>
<style scoped>
.welcome {
  text-align: center;
  line-height: calc(100vh - 60px);
  font-size: 40px;
  color: #409EFF;
}

.month {
  margin-top: 16px;
  margin-right: 60px;

}

.title {
  font-weight: 500;
  font-size: 18px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  flex: 2;
  color: #409EFF;
}

.sub-title {
  margin-left: 20px;
  margin-top: 20px;

}

.app-body2 {
  background: white;
  padding: 20px 20px 40px 0px;
  margin: 10px;

}

.app-table{
  /* width:100%; */
}
.chart-top {
  display: flex;
}
</style>
